﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位添加</title>
    <!-- 引入Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <style>
        /* 样式保持不变 */
    </style>
</head>
<body>
    <div id="app" class="job-form-container">
        <div class="breadcrumb">
            <span>您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--职位设置--职位修改</span>
        </div>

        <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
            <el-form-item label="职位分类编号" prop="major_kind_id">
                <el-input v-model="formData.major_kind_id"></el-input>
            </el-form-item>

            <el-form-item label="职位分类名称" prop="major_kind_name">
                <el-select v-model="formData.major_kind_name" placeholder="请选择职位分类">
                    <!-- 下拉框选项 -->
                    <el-option label="销售" value="销售"></el-option>
                    <el-option label="软件开发" value="软件开发"></el-option>
                    <el-option label="人力资源" value="人力资源"></el-option>
                    <el-option label="生产部" value="生产部"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item class="el-button-group">
                <el-button type="primary" :loading="loading" v-on:click="handleSubmit">提交</el-button>
                <el-button v-on:click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;
        const { ElMessage } = ElementPlus;

        createApp({
            setup() {
                // 表单数据（与后端模型完全一致）
                const formData = ref({
                    mfk_id:'',
                    major_kind_id: '',
                    major_kind_name: ''
                });

                // 加载状态
                const loading = ref(false);

                // 验证规则
                const rules = ref({
                    major_kind_id: [{ required: true, message: '请输入属性种类', trigger: 'blur' }],
                    major_kind_name: [{ required: true, message: '请输入属性名称', trigger: 'blur' }]
                });

                const formRef = ref(null);

                // 初始化表单数据
                const initFormData = () => {
                    const encodedData = new URLSearchParams(window.location.search).get('data');
                    if (encodedData) {
                        try {
                            const data = JSON.parse(decodeURIComponent(encodedData));
                            formData.value = data;
                            console.log('初始化表单数据:', formData.value);
                        } catch (error) {
                            console.error('解析数据失败:', error);
                            ElMessage.error('数据加载失败');
                        }
                    }
                };

                // 组件挂载后初始化数据
                onMounted(initFormData);

                // 表单验证和提交方法
                const handleSubmit = async () => {
                   console.log('提交的数据:', formData.value)
                // 简单的表单验证，可根据实际需求扩展
                if (!formData.value.major_kind_id ||!formData.value.major_kind_name) {
                    ElMessage.error('属性种类和属性名称必填项');
                    return;
                }

                try {
                    const response = await axios.post(
                        "@Url.Action("major_kind_update", "config")",
                        formData.value,
                        { headers: { "Content-Type": "application/json" } }
                    );

                    if (response.data.success) {
                        ElMessage.success('修改成功');
                        window.location.href = "@Url.Action("config_major_kind", "config")";
                    } else {
                        ElMessageBox.alert({
                            title: '修改失败',
                            message: response.data.message,
                            type: 'error'
                        });
                    }
                } catch (error) {
                    if (error.response) {
                        // 处理后端返回的具体错误
                        const errorMessage = error.response.data?.message || '服务器返回错误，请检查';
                        ElMessageBox.alert({
                            title: '服务器错误',
                            message: errorMessage,
                            type: 'error'
                        });
                    } else {
                        ElMessage.error('网络错误，请重试');
                    }
                    console.error('请求错误:', error);
                }
                };

                const goBack = () => window.history.back();

                return { formData, rules, formRef, handleSubmit, goBack, loading };
            }
        })
        .use(ElementPlus, { locale: ElementPlusLocaleZhCn })
        .mount('#app');
    </script>
</body>
</html>